<template>
    <button
        :disabled="buttonDisabled"
        hover-class="button-hover"
        @click="handleClick"
        :class="[type ? 'el-button' + type :'']"
    >
        <my-icon class="el-icon-loading" v-if="loading"></my-icon >
        <my-icon :class="icon" v-if="icon && !loading"></my-icon>
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>

<script>
import MyIcon from '../icon/LeIcon.vue'
    export default {
  components: { MyIcon },
        name: 'LeButton',
        props: {
            type: {
                String,
                default: 'default'
            },
            size: String,
            disabled: Boolean,
            loading: Boolean,
            icon: {
                type: String,
                default: ''
            },
        },
        computed: {
            buttonDisabled() {
                return this.disabled
            }
        },
        methods: {
            handleClick(event) {
                this.$emit('click', event)
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>